import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      items: []
    };
  }
  handleChange = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  }
  handleClick=()=>{
    this.setState({
      items:[...this.state.items,this.state.inputValue]
    });
    console.log(JSON.stringify(this.state.items));
  }
  handleItemDelete=index=>{
    this.state.items.splice(index,1);
    this.setState({
      items:this.state.items
    });
  }
  render() {
    return (
      <div className="App">
        <input value={this.state.inputValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>提交</button>
        <ul>
          {this.state.items.map((item,index)=><li key={index} onClick={this.handleItemDelete.bind(this,index)}>{item}</li>)}
        </ul>
      </div>
    );
  }
}

export default App;
